<template>
  <view style="padding: 40rpx;">
    <view style="padding: 20rpx; margin: 80rpx 0; background-color: #fff; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.1); border-radius: 10rpx;">
      <view style="margin: 50rpx 30rpx; font-size: 40rpx;">家教直聘</view>
      <uni-forms ref="form" :modelValue="form" :rules="rules" validateTrigger='blur'>
        <uni-forms-item name="account" required>
          <uni-easyinput prefixIcon="person" v-model="form.account" placeholder="请输入账号" />
        </uni-forms-item>
        <uni-forms-item name="password" required>
          <uni-easyinput type="password" prefixIcon="locked" v-model="form.password" placeholder="请输入密码" />
        </uni-forms-item>
        <view style="margin: 10px; margin-bottom: 20px;">
          <uv-radio-group v-model="form.role" placement="row">
            <uv-radio name="user" label="家长"></uv-radio>
            <uv-radio name="teacher" activeColor="red" label="教师"></uv-radio>
          </uv-radio-group>
        </view>
        <uni-forms-item>
          <button @click="login" style="background-color: #aaaaff; border-color: #aaaaff; height: 70rpx; line-height: 70rpx;">登 录</button>
        </uni-forms-item>
		<uni-forms-item>
			<view style="text-align: right;">还没有账号？去 <navigator style="display: inline-block; color: #aaaaff; 
				margin-left: 4rpx;" url="/pages/register/register">注册</navigator></view>
		</uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { post } from '@/utils/request.js'; // 导入 post 函数

export default {
  data() {
    return {
      form: {
        account: '',
        password: '',
        role: 'user' // 默认为家长
      },
      rules: {
        account: {
          rules: [
            { required: true, errorMessage: '请输入账号' },
            { minLength: 3, maxLength: 10, errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符' }
          ]
        },
        password: {
          rules: [
            { required: true, errorMessage: '请输入密码' },
            { minLength: 3, maxLength: 10, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
          ]
        }
      }
    };
  },
  methods: {
    async login() {
      try {
        // 清除所有本地缓存
        uni.clearStorageSync();
        
        // 校验表单（异步操作）
        const isValid = await this.$refs.form.validate();

        if (!isValid) {
          return; // 校验不通过则直接返回
        }

        // 根据角色选择登录接口
        const loginUrl = this.form.role === 'teacher' ? '/teacher/login' : '/user/login';

        // 使用 this.$request.post 发送登录请求
        const response = await this.$request.post(loginUrl, this.form);

        if (response.code === '200') {
          uni.showToast({
            icon: 'success',
            title: '登录成功'
          });

          const userInfo = { ...response.data, role: this.form.role };
          uni.setStorageSync('xm-user', userInfo);

          // 跳转到主页
          uni.switchTab({
            url: '/pages/index/index'
          });
        } else {
          uni.showToast({
            icon: 'error',
            title: response.msg 
          });
        }
      } catch (error) {
        console.error('登录错误信息：', error);
        uni.showToast({
          icon: 'error',
          title: '表单验证失败，请检查输入',
        });
      }
    }

  }
};
</script>

<style>
</style>
